<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<style>
    a {
        color: #fff;
    }

    h1 {
        text-align: center;
    }

    th {
        text-align: center;
    }

    .add {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .add .btn {
        background: aqua;
    }
</style>

<body>
<h1>spring-boot</h1>
<table class="table table-striped table-bordered table-hover text-center">
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>密码</th>
        <th>操作</th>
    </tr>
    </thead>

    <tr th:each="users:${users}">
        <td th:text="${users.id}"></td>
        <td th:text="${users.userName}"></td>
        <td th:text="${users.passWord}"></td>
        <td>
            <a class="btn btn-primary" th:href="@{'/updatePage/'+${users.id}}">更改</a>
            <a class="btn btn-danger" th:href="@{'/delete/'+${users.id}}">删除</a>
        </td>
    </tr>
</table>
<div class="add">
    <button class="btn "><a href="/useradd">添加用户</a></button>
</div>
</body>

</html>
